extends layout

block content
    script.
        var characters = !{JSON.stringify(characters)};
    script(type='text/javascript', src='./javascripts/jquery-1.10.2.min.js')
    script(type='text/javascript', src='./javascripts/gcManager.js')
    #mainContentPain
        hr
        h1 Create or modify characters
        hr
        #message
        table
            tbody
                - var i = 0;
                - for (var charName in characters) {
                    - var imagePath = characters[charName];
                    //.charImage
                    - if(i % 8 == 0){
                        tr
                    - }
                    - i++;
                    td.characterPortrait(name='#{charName}')
                        img.portraitImage(src='#{imagePath}')
                -}
        hr
        h1.selChar None Selected
        hr
        form#editForm(method="post", enctype="multipart/form-data")

            input(type="button", value="Commit Changes", id="commitButton")
            input(type="button", value="Clear Changes", id="clearButton")

            br
            br
            table
                tbody
                tr
                    td
                        label.formlabel Character Name:
                    td
                        input(type="text", name="editName", class="formInput")
                tr
                    td
                        label.formlabel Character Description:
                    td
                        textarea(name="editDesc", class="formInput")
                tr
                    td
                        label.formlabel Character Portrait:
                    td
                        input.imgInput(type="file", name="editPortrait", class="formInput", data-imgId="#tempCharPortrait")
                    td
                        img.uploadImg#tempCharPortrait(src="#", hidden)

            hr
            h1 Abilities
            hr
            table
                tbody
            hr
            h1.selAbil None Selected
            hr
            br
            br
            table
                tbody
                tr
                    td
                        label.formlabel Ability Name:
                    td
                        input(type="text", name="editAbilName", class="formInput")
                tr
                    td
                        label.formlabel Ability Description:
                    td
                        textarea(name="editAbilDesc", class="formInput")
                tr
                    td
                        label.formlabel Ability Image:
                    td
                        input.imgInput(type="file", name="editAbilPortrait", class="formInput", data-imgId="#tempAbilPortrait")
                    td
                        img.uploadImg#tempAbilPortrait(src="#", hidden)
                tr
                    td
                        label.formlabel Ability Cost:
                    td
                        table
                            tbody
                                tr

                                    td(style="background-color:Red;border:solid 1px Black;width:24px")
                                    td
                                        select(name="editAbilRedCost", class="formInput")
                                            option(value="1") 1
                                            option(value="2") 2
                                            option(value="3") 3
                                            option(value="4") 4
                                    td(style="background-color:Blue;border:solid 1px Black;width:24px")
                                    td
                                        select(name="editAbilBlueCost", class="formInput")
                                            option(value="1") 1
                                            option(value="2") 2
                                            option(value="3") 3
                                            option(value="4") 4
                                    td(style="background-color:White;border:solid 1px Black;width:24px")
                                    td
                                        select(name="editAbilWhiteCost", class="formInput")
                                            option(value="1") 1
                                            option(value="2") 2
                                            option(value="3") 3
                                            option(value="4") 4
                                    td(style="background-color:Yellow;border:solid 1px Black;width:24px")
                                    td
                                        select(name="editAbilYellowCost", class="formInput")
                                            option(value="1") 1
                                            option(value="2") 2
                                            option(value="3") 3
                                            option(value="4") 4
                                    td(style="background-color:Black;border:solid 1px Black;width:24px")
                                    td
                                        select(name="editAbilRandomCost", class="formInput")
                                            option(value="1") 1
                                            option(value="2") 2
                                            option(value="3") 3
                                            option(value="4") 4
                tr
                    td
                        label.formlabel Ability Cooldown:
                    td
                        select(name="editAbilCooldown", class="formInput")
                            - for (var i = 0; i < 11; ++i) {
                                option(value='#{i}') #{i}
                            - }


        include footer